<template>
    <div style="margin: 20px;">
        <el-container>           
        <el-header >        
          <span style="font-size:60px">患者费用查询</span>
          <el-link type="primary" href="/#/initMain" style="float:right"><b>返回首页</b></el-link>
        </el-header>
        <el-main style="text-align:left">               
            <span ><b>消费信息查询</b></span><br/>
            <div>
            <el-form  :model="costQueryForm" :rules="rules" ref="costQueryForm" label-width="60px" class="demo-costQueryForm">  
                <el-row :gutter="20">
                  <el-col :span="8">             
                    <el-form-item label="病历号" prop="patientId" >
                    <el-input v-model="costQueryForm.patientId"  placeholder="病历号"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="时间范围">
                      <!--<el-date-picker
                        v-model="costQueryForm.dates"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                      </el-date-picker>-->
                      
                      <div class="block">
                        <el-date-picker
                          v-model="costQueryForm.dates"
                          type="datetimerange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          
                          :default-time="['00:00:00', '23:59:59']">
                        </el-date-picker>
                      </div>
                    </el-form-item>
                  </el-col>    
                  <el-col :span="4">             
                    <el-button type="primary" @click="costQuery()" icon="el-icon-search">查询</el-button>
                  </el-col>
              </el-row>
            </el-form>
            </div>
                
                <span ><b>患者信息确认</b></span>
                <table> 
                    <tr>
                        <td>姓名</td>        
                
                        <td><el-input v-model="name"  placeholder="姓名"></el-input></td><td></td>
                        <td>身份证号</td>
                        <td><el-input v-model="personId"  placeholder="身份证号"></el-input></td><td></td>
                        <td>家庭住址</td>
                        <td><el-input v-model="address"  placeholder="家庭住址"></el-input></td>
                    </tr>
                    
                </table>
                
                
                
                <hr/>
                <span ><b>消费信息</b></span>
                
        <el-table
          :data="tableDataP"
          max-height="300"
          tooltip-effect="dark"
          style="width: 100%"
          :default-sort = "{prop: 'date'}"
          >
          <el-table-column
            prop="projectName"
            label="项目名"
            width="200">
          </el-table-column>
          <el-table-column
            prop="price"
            label="单价"
            width="120">
          </el-table-column>
          <el-table-column
            prop="projectNum"
            label="数量"
            width="120">
          </el-table-column>
          <el-table-column label="金额">
            <template slot-scope="scope">
              <span style="margin-left: 10px">
              {{scope.row.price*scope.row.projectNum}}
              </span>
              </template>
          </el-table-column>
          </el-table>

        <el-table
          :data="tableDataD"
          max-height="300"
          tooltip-effect="dark"
          style="width: 100%"
          :default-sort = "{prop: 'date'}"
          >
          <el-table-column
            prop="drugName"
            label="药品名"
            width="200">
          </el-table-column>
          <el-table-column
            prop="drugUnitPrice"
            label="单价"
            width="120">
          </el-table-column>
          <el-table-column
            prop="drugNum"
            label="数量"
            width="120">
          </el-table-column>
          <el-table-column label="金额" width="100">
            <template slot-scope="scope">
              <span style="margin-left: 10px">
                {{scope.row.drugUnitPrice*scope.row.drugNum}}
              </span>
              </template>
          </el-table-column>
          </el-table>
              </el-main>
            </el-container>
   </div>
</template>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
    
  }
</style>

<script>
import axios from "axios";
import moment from 'moment';

  export default {
    
    data() {
      return {
        name:'',
        personId:'',
        address:'',



        costQueryForm:{
            patientId:'' ,
            dates:[new Date(2020, 4, 1, 0, 0, 0), new Date(2020, 4, 1, 23, 59, 59)]//[ "2020-03-10T16:00:00.000Z", "2020-04-13T16:00:00.000Z" ]      
        },
        rules: {
          patientId: [
            { required: true, message: '请输入病历号', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
          ]
        },
       tableDataP:[],
       tableDataD:[],
      }
    },
    methods: {
      /*submitForm(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
                alert('submit!');
            } else {
                console.log('error submit!!');
                return false;
            }
        });
      }*/
      costQuery(){
        axios
        .get("/api/reception/findPatient", {
          params: {
            patientId: this.costQueryForm.patientId
          }
        })
        .then(res => {
          console.log(res.data);
          this.name = res.data.name;
          this.personId = res.data.identified;
          this.address = res.data.address;
          //sessionStorage.setItem("patient", JSON.stringify(res.data));
          axios
            .get("/api/reception/findProCost", {
              params: {
                patientId: this.costQueryForm.patientId,
                startTime:this.datetimeFormat(this.costQueryForm.dates[0]),
                endTime:this.datetimeFormat(this.costQueryForm.dates[1])
                //stateId:5
              }
            })
            .then(res => {
              console.log(res);
              this.tableDataP=[];
              this.tableDataP = res.data;
            })
            .catch(function(error) {
              console.log(error);
            });
          axios
            .get("/api/reception/findDrugCost", {
              params: {
                patientId: this.costQueryForm.patientId,
                startTime:this.datetimeFormat(this.costQueryForm.dates[0]),
                endTime:this.datetimeFormat(this.costQueryForm.dates[1])//stateId:5
              }
            })
            .then(res => {
              console.log(res);
              this.tableDataD=[];
              this.tableDataD = res.data;
            })
            .catch(function(error) {
              console.log(error);
            });
        })
        .catch(function(error) {
              console.log(error);
            });
      },
      datetimeFormat(date){
        return moment(date).format('yyyy-MM-dd HH:mm:ss');
      }

    },
  }
</script>